<template>
    <div>
        <a-form layout="inline" :model="searchData" style="margin-top: 10px">
            <a-form-item>
                <a-input v-model:value="searchData.keyWord" placeholder="请输入搜索词"></a-input>
            </a-form-item>
            <a-form-item>
                <a-config-provider :locale="locale">
                    <a-range-picker v-model:value="searchData.dateTime" show-time/>
                </a-config-provider>
            </a-form-item>
            <a-form-item>
                <a-space>
                    <a-button type="primary" @click="load(1)">搜索</a-button>
                    <a-button type="default" @click="reset">重置</a-button>
                </a-space>
            </a-form-item>
        </a-form>
        <a-button type="primary" style="margin-top: 10px" @click="openModal({})">新增</a-button>
        <a-table :dataSource="appVersionList"
                 style="margin-top: 10px"
                 :columns="columns"
                 :pagination="false"
                 :scroll="{ x: 2000}"
                 bordered>
            <template #platform="{text,record}">
                {{text == 1 ? 'IOS' : 'Android'}}
            </template>
            <template #forceUpdate="{text,record}">
                {{text == 1 ? '是' : '否'}}
            </template>
            <template #createDate="{text,record}">
                {{this.$moment(text).format('yyyy-MM-DD HH:mm:ss')}}
            </template>
            <template #updateDate="{text,record}">
                {{this.$moment(text).format('yyyy-MM-DD HH:mm:ss')}}
            </template>
            <template #action="{text,record}">
                <a-space>
                    <a-button type="primary" @click="openModal(record)">编辑</a-button>
                    <a-popconfirm
                            title="是否确认删除?"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="okDelete(record.id)"
                    >
                        <a-button type="danger">删除</a-button>
                    </a-popconfirm>
                </a-space>
            </template>
        </a-table>
        <a-config-provider :locale="locale">
            <a-pagination style="margin-top: 10px; float: right"
                          v-model:current="pagination.current"
                          v-model:pageSize="pagination.pageSize"
                          show-quick-jumper
                          show-size-changer
                          :total="pagination.total"
                          :show-total="total => `总 ${total} 条数据`"
                          :page-size-options="pageSizeOptions"
                          @change="onChange"/>
        </a-config-provider>
        <a-modal v-model:visible="visible" title="新增或编辑" @ok="handleOk">
            <a-form v-model="appVersion"
                    :label-col="{ span: 8 }">
                <a-form-item label="平台">
                    <a-radio-group v-model:value="appVersion.platform">
                        <a-radio :value="0">Android</a-radio>
                        <a-radio :value="1">IOS</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="版本号">
                    <a-input v-model:value="appVersion.versionNo"></a-input>
                </a-form-item>
                <a-form-item label="是否强制更新">
                    <a-radio-group v-model:value="appVersion.forceUpdate">
                        <a-radio :value="0">否</a-radio>
                        <a-radio :value="1">是</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="下载url">
                    <a-input v-model:value="appVersion.downPath"></a-input>
                </a-form-item>
                <a-form-item label="安装包大小">
                    <a-input v-model:value="appVersion.size" suffix="MB"></a-input>
                </a-form-item>
                <a-form-item label="描述">
                    <a-textarea v-model:value="appVersion.appExplain" :auto-size="{minRows:2}"></a-textarea>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import {ref, onMounted} from 'vue'
    import axios from 'axios'
    import dayjs from 'dayjs';
    import {message} from 'ant-design-vue';
    import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'

    export default {
        name: "admin-appVersion",
        setup() {
            const columns = [
                {
                    title: 'ID',
                    dataIndex: 'id',
                    key: 'id',
                    align: 'center',
                    fixed: 'left'
                },
                {
                    title: '平台',
                    dataIndex: 'platform',
                    key: 'platform',
                    slots: {customRender: 'platform'},
                    align: 'center',
                    fixed: 'left'
                },
                {
                    title: '版本号',
                    dataIndex: 'versionNo',
                    key: 'versionNo',
                    align: 'center'
                },
                {
                    title: '更新规则',
                    dataIndex: 'forceUpdate',
                    key: 'forceUpdate',
                    slots: {customRender: 'forceUpdate'},
                    align: 'center',
                    width: '100px'
                },
                {
                    title: '下载url',
                    dataIndex: 'downPath',
                    key: 'downPath',
                    align: 'center',
                    width: '400px'
                },
                {
                    title: '安装包大小',
                    dataIndex: 'size',
                    key: 'size',
                    align: 'center'
                },
                {
                    title: '描述',
                    dataIndex: 'appExplain',
                    key: 'appExplain',
                    align: 'center',
                    width: '300px'
                },
                {
                    title: '创建时间',
                    dataIndex: 'createDate',
                    key: 'createDate',
                    slots: {customRender: 'createDate'},
                    align: 'center'
                },
                {
                    title: '更新时间',
                    dataIndex: 'updateDate',
                    key: 'updateDate',
                    slots: {customRender: 'updateDate'},
                    align: 'center'
                },
                {
                    title: '创建用户',
                    dataIndex: 'createBy',
                    key: 'createBy',
                    slots: {customRender: 'createBy'},
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'action',
                    slots: {customRender: 'action'},
                    align: 'center',
                    fixed: 'right',
                    width: '200px'
                }
            ]
            const locale = zhCN
            const appVersion = ref({})
            const appVersionList = ref()
            const searchData = ref({
                dateTime: []
            })
            const pagination = ref({
                current: 1,
                pageSize: 5,
            })
            const pageSizeOptions = ref(['5', '10', '20', '30', '50', '100'])
            const visible = ref(false);
            const prefix = ref('Http://');
            const suffix = ref('.com');

            const handleOk = () => {
                axios.post('/app-version/saveOrUpdate', appVersion.value).then(rs => {
                    console.log("新增或修改结果：", rs)
                    if (rs.data.code == 200) {
                        visible.value = false
                        message.success("操作成功")
                        load()
                    } else {
                        message.error(rs.data.message)
                    }
                })
            }

            const okDelete = (id) => {
                console.log("要删除的ID：" + id)
                axios.delete('/app-version/delete/' + id).then(rs => {
                    if (rs.data.code == 200) {
                        message.success("删除成功")
                        load()
                    } else {
                        message.error(rs.data.message)
                    }
                })
            }

            const openModal = (obj) => {
                console.log("模态框参数：", obj)
                visible.value = true;
                appVersion.value = JSON.parse(JSON.stringify(obj))
            }

            const load = (pageNum) => {
                // const parseTime = 'YYYY-MM-DD HH:mm:ss'
                const start = searchData.value.dateTime.length == 0 ? null : dayjs(searchData.value.dateTime[0]).format()
                const end = searchData.value.dateTime.length == 0 ? null : dayjs(searchData.value.dateTime[1]).format()
                pagination.value.current = pageNum == 1 ? 1 : pagination.value.current
                axios.get('/app-version/list', {
                    params: {
                        pageNum: pagination.value.current,
                        pageSize: pagination.value.pageSize,
                        keyWord: searchData.value.keyWord,
                        startTime: start,
                        endTime: end,
                    }
                }).then(rs => {
                    console.log("查找结果：", rs)
                    appVersionList.value = rs.data.data.records
                    pagination.value.total = rs.data.data.total
                })
            }

            const onChange = (pageNum, pageSize) => {
                pagination.value.current = pageNum
                pagination.value.pageSize = pageSize
                load()
            }

            const reset = () => {
                searchData.value = {dateTime: []}
                load()
            }

            onMounted(() => {
                load()
            })
            return {
                columns,
                appVersion,
                appVersionList,
                pagination,
                pageSizeOptions,
                onChange,
                load,
                locale,
                searchData,
                reset,
                visible,
                openModal,
                handleOk,
                okDelete,
                prefix,
                suffix
            }
        }
    }
</script>

<style scoped>

</style>